<template>
    <div class="limit-project">
        <div class="left">
            <div class="countdown">
                <span class="countdown-title">倒计时</span>
                <div v-if="product.isover==false||countDownObj.over==false">
                    <div class="countdown-list">
                        <div v-if="countDownObj.day!='00'">
                            {{countDownObj.day}}
                        </div>
                        <span v-if="countDownObj.day!='00'">天</span>
                        <div>{{countDownObj.hou}}</div>
                        :
                        <div>{{countDownObj.min}}</div>
                        :
                        <div>{{countDownObj.sec}}</div>
                    </div>
                </div>
                <div v-else>
                    <div class="countdown-over">
                        已结束
                    </div>
                </div>
            </div>
            <span class="project-name">{{product.pname}}</span>
            <div class="point">
                <div class="point-icon"></div>
                <span class="point-num">{{product.need_point}}</span>
            </div>
        </div>
        
        <img v-bind:src="product.pimg" class="slide-image right-image" />
    </div>
</template>

<script>
    export default {
        name: "LimitProduct",
        props: {
            product: {
                type: Object,
                default: {}
            },
        },
        watch: {
            product: {
                immediate: true,  // 这是为了第一次拿到值的时候就对sd进行监听
                handler( val, oldval ) {
                    this.countDown()
                }
            }
        },
        data() {
            return {
                countDownObj: {
                    day: '00',
                    hou: '00',
                    min: '00',
                    sec: '00',
                    over: true
                }, //倒计时
                countDownTimer: null
            }
        },
        created() {
            /*this.$once( 'hook:beforeDestroy', () => {
                clearTimeout( this.countDownTimer );
                this.countDownTimer = null;
            } )*/
        },
        methods: {
            timeFormat( param ) {//小于10的格式化函数
                return param < 10 ? '0' + param : param;
            },
            countDown() {
                //倒计时函数
                // 获取当前时间，同时得到活动结束时间数组
                let newTime=new Date().getTime();
                // 对结束时间进行处理渲染到页面
                
                let endTime=new Date( this.product.valid_end.replace( /-/g, '/' ) ).getTime();
                let obj=null;
                // 如果活动未结束，对时间进行处理
                if( endTime - newTime > 0 ) {
                    let time=(endTime - newTime) / 1000;
                    // 获取天、时、分、秒
                    let day=parseInt( time / (60 * 60 * 24) );
                    let hou=parseInt( time % (60 * 60 * 24) / 3600 );
                    let min=parseInt( time % (60 * 60 * 24) % 3600 / 60 );
                    let sec=parseInt( time % (60 * 60 * 24) % 3600 % 60 );
                    obj={
                        day: this.timeFormat( day ),
                        hou: this.timeFormat( hou ),
                        min: this.timeFormat( min ),
                        sec: this.timeFormat( sec ),
                        over: false
                    };
                    
                } else {//活动已结束，全部设置为'00'
                    obj={
                        day: '00',
                        hou: '00',
                        min: '00',
                        sec: '00',
                        over: true
                    }
                }
                this.countDownObj=obj;
                
                if( this.countDownObj.over === true ) {
                    clearTimeout( this.countDownTimer );
                    this.countDownTimer=null;
                }
                // 渲染，然后每隔一秒执行一次倒计时函数
                this.countDownTimer=setTimeout( this.countDown, 1000 );
                
            },
            
            bindToDetail( res ) {
                this.$router.push( '/product/' + res )
            }
        }
    }
</script>

<style scoped>
    .limit-projects .limit-project {
        margin-top:20px;
        display:flex;
        flex-direction:row;
        }
    
    .limit-project .left {
        width:348px;
        display:flex;
        flex-direction:column;
        }
    
    .limit-project .countdown {
        margin:0;
        padding:0;
        font-size:22px;
        display:flex;
        flex-direction:row;
        }
    
    .limit-project .countdown-over {
        margin-left:12px;
        color:#fff;
        background-color:#a9a9a9;
        width:80px;
        height:32px;
        line-height:32px;
        text-align:center;
        font-size:20px;
        border-radius:2px;
        }
    
    .limit-project .countdown-list {
        line-height:32px;
        margin-left:6px;
        color:#BF1218;
        display:flex;
        flex-direction:row;
        }
    
    .limit-project .countdown-list div {
        border:1px solid #dcdcdc;
        min-width:30px;
        height:30px;
        line-height:30px;
        margin:0 4px;
        padding:0 4px;
        text-align:center;
        }
    
    .limit-project .project-name {
        font-size:28px;
        margin-top:12px;
        }
    
    .limit-project .point {
        margin-top:22px;
        }
    
    .limit-project .right-image {
        width:138px;
        height:128px;
        margin-left:20px;
        }

</style>
